<template>
    <div class="wrap">
        <Header :tap="'图文分享'"/>
        <div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<a class="mui-control-item" href="#item1mobile" data-wid="tab-top-subpage-1.html" v-for="(item,index) in navList" :key="index">
							{{item.name}}
						</a>
					</div>
				</div>

			</div>


            <div class="pic_list">
                <div class="pic_item" v-for="item in message" :key="item.id" @click="Ondetail(item.id)">
                    <img :src="item.imgUrl" alt="">
                    <p>{{item.content}}</p>
                </div>

            </div>


    </div>
</template>
<script>
import Header from "./commons/header.vue";
import mui from '../lib/mui/js/mui.min.js'
export default {
  data() {
    return {
      navList: [
        { id: 0, name: "推荐" },
        { id: 1, name: "新闻" },
        { id: 2, name: "旅游" },
        { id: 3, name: "唱歌" },
        { id: 4, name: "打游戏" }
      ],
      message: [
        { id: 1, imgUrl: "../images/8.jpg", content: "景色很美1" },
        { id: 2, imgUrl: "../images/18.png", content: "景色很美2" },
        { id: 3, imgUrl: "../images/55st.png", content: "景色很美3" },
        { id: 4, imgUrl: "../images/56st.png", content: "景色很美4" }
      ]
    };
  },
  created() {
    this.navList.unshift({ id: 0, name: "全部" });
  },
  methods: {
    Ondetail(id) {
      this.$router.push("/photoshare/photodetail/" + id);
    }
  },
  components: {
    Header
  },
  mounted() {
    mui(".mui-scroll").scroll({
      deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
    });
  }
};
</script>
<style scoped>
.pic_item {
  position: relative;
}
.pic_item p {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  color: #fff;
  margin-bottom: 0;
  padding: 5px;
}
.pic_item img {
  width: 100%;
}
</style>


